<template>
  <div class="product-detail-page" v-if="product">
    <div class="page-container">
      <!-- 产品头部信息 -->
      <div class="product-hero animate__animated animate__fadeInUp">
        <div class="product-main-info">
          <div class="product-icon-large">{{ product.icon }}</div>
          <div class="product-details">
            <h1 class="product-title">
              <span class="gradient-text">{{ product.name }}</span>
            </h1>
            <p class="product-subtitle">{{ product.description }}</p>
            <div class="product-meta">
              <n-tag type="info" size="medium" class="category-tag">
                {{ product.category }}
              </n-tag>
              <n-tag v-if="product.popular" type="error" size="medium" class="popular-tag">
                🔥 热门推荐
              </n-tag>
            </div>
          </div>
        </div>
      </div>

      <!-- 功能特性 -->
<!--      <section class="features-section">-->
<!--        <h2 class="section-title">-->
<!--          <span class="gradient-text">核心功能</span>-->
<!--        </h2>-->
<!--        <div class="features-grid">-->
<!--          <div-->
<!--            v-for="(feature, index) in product.features"-->
<!--            :key="feature"-->
<!--            class="feature-card tiktok-card animate__animated animate__fadeInUp"-->
<!--            :style="{ animationDelay: `${index * 0.1}s` }"-->
<!--          >-->
<!--            <div class="product-feature-icon">✨</div>-->
<!--            <h3 class="feature-title">{{ feature }}</h3>-->
<!--            <p class="feature-description">-->
<!--              {{ getFeatureDescription(feature) }}-->
<!--            </p>-->
<!--          </div>-->
<!--        </div>-->
<!--      </section>-->

      <!-- 价格方案 -->
      <section class="pricing-section">
        <div class="section-header animate__animated animate__fadeInUp">
          <div class="header-badge">
            <span class="badge-icon">💎</span>
            <span class="badge-label">{{ getPricingBadgeLabel() }}</span>
          </div>
          <h2 class="section-title">
            <span class="gradient-text">{{ getPricingTitle() }}</span>
          </h2>
          <p class="section-subtitle">
            {{ getPricingSubtitle() }}
          </p>
        </div>

        <!-- 套餐选择 -->
        <div class="plan-category">
          <div class="category-header">
            <h3 class="category-title">{{ getPlanCategoryTitle() }}</h3>
            <p class="category-desc">{{ getStandardPlanDesc() }}</p>
          </div>
          <div class="pricing-grid">
            <div
              v-for="(plan, index) in standardPlans"
              :key="plan.type"
              class="pricing-card tiktok-card animate__animated animate__fadeInUp"
              :style="{ animationDelay: `${index * 0.1}s` }"
            >
              <div class="plan-header">
                <div class="plan-icon">
                  <div class="icon-wrapper" :class="`icon-${plan.icon}`"></div>
                </div>
                <h3 class="plan-name">{{ plan.name }}</h3>
                <p class="plan-description">{{ plan.description }}</p>
              </div>

              <div class="plan-pricing">
                <span class="plan-price gradient-text">¥{{ plan.price }}</span>
                <span class="plan-period">/ {{ plan.period }}</span>
              </div>

              <div class="plan-features">
                <div
                  v-for="feature in plan.features"
                  :key="feature"
                  class="plan-feature"
                >
                  <span class="feature-icon">✓</span>
                  <span>{{ feature }}</span>
                </div>
              </div>

              <n-button
                type="primary"
                size="large"
                block
                class="tiktok-btn"
                @click="handleSelectPlan(plan)"
                :loading="purchaseLoading === plan.type"
              >
                立即购买
              </n-button>
            </div>
          </div>
        </div>

        <!-- 高级版套餐 - 只有Cursor才显示 -->
        <div v-if="premiumPlans.length > 0" class="plan-category">
          <div class="category-header">
            <h3 class="category-title">🚀 高级版（免魔法）</h3>
            <p class="category-desc">企业级服务，无需网络配置，开箱即用</p>
          </div>
          <div class="pricing-grid">
            <div
              v-for="(plan, index) in premiumPlans"
              :key="plan.type"
              class="pricing-card tiktok-card animate__animated animate__fadeInUp premium-card"
              :style="{ animationDelay: `${(index + 4) * 0.1}s` }"
            >
              <div class="plan-header">
                <div class="plan-icon">
                  <div class="icon-wrapper" :class="`icon-${plan.icon}`"></div>
                </div>
                <h3 class="plan-name">{{ plan.name }}</h3>
                <p class="plan-description">{{ plan.description }}</p>
              </div>

              <div class="plan-pricing">
                <span class="plan-price gradient-text">¥{{ plan.price }}</span>
                <span class="plan-period">/ {{ plan.period }}</span>
              </div>

              <div class="plan-features">
                <div
                  v-for="feature in plan.features"
                  :key="feature"
                  class="plan-feature"
                >
                  <span class="feature-icon">✓</span>
                  <span>{{ feature }}</span>
                </div>
              </div>

              <n-button
                type="primary"
                size="large"
                block
                class="tiktok-btn premium-btn"
                @click="handleSelectPlan(plan)"
                :loading="purchaseLoading === plan.type"
              >
                立即购买
              </n-button>
            </div>
          </div>
        </div>
      </section>

      <!-- 使用教程 -->
      <section class="tutorial-section">
        <h2 class="section-title">
          <span class="gradient-text">使用指南</span>
        </h2>
        <div class="tutorial-steps">
          <div
            v-for="(step, index) in tutorialSteps"
            :key="index"
            class="tutorial-step animate__animated animate__fadeInLeft"
            :style="{ animationDelay: `${index * 0.2}s` }"
          >
            <div class="step-number">{{ index + 1 }}</div>
            <div class="step-content">
              <h3 class="step-title">{{ step.title }}</h3>
              <p class="step-description">{{ step.description }}</p>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- 精简购买弹窗 -->
    <n-modal v-model:show="showPurchaseModal" class="purchase-modal">
    <n-card
      style="width: 500px"
      title="购买套餐"
      :bordered="false"
      size="huge"
      role="dialog"
      aria-modal="true"
      class="purchase-card"
    >
      <template #header-extra>
        <n-button quaternary @click="showPurchaseModal = false">
          <n-icon size="20">×</n-icon>
        </n-button>
      </template>

      <div class="purchase-content">
        <!-- 套餐信息 -->
        <div class="selected-plan">
          <div class="plan-info">
            <div class="plan-icon-small">
              <div
                class="icon-wrapper"
                :class="`icon-${selectedPlan?.icon}`"
              ></div>
            </div>
            <div class="plan-details">
              <h3>{{ selectedPlan?.name }}</h3>
              <div class="plan-price">
                <span class="price">¥{{ selectedPlan?.price }}</span>
                <span class="period">/ {{ selectedPlan?.period }}</span>
              </div>
            </div>
            <div class="plan-badge">
              {{
                selectedPlan?.type?.includes("premium")
                  ? "🚀 高级版"
                  : "🎯 普通版"
              }}
            </div>
          </div>
        </div>

        <!-- QQ群二维码 -->
        <div class="qr-section">
          <div class="qr-header">
            <span class="qr-title">💬 Cursor交流群-6号</span>
            <span class="group-number">1013099557</span>
          </div>
          <div class="qr-content">
            <div class="qr-code">
              <img
                src="@/assets/qqcode.jpg"
                alt="QQ群二维码"
                class="qr-image"
              />
            </div>
            <div class="qr-steps">
              <div class="step">
                <div class="step-num">1</div>
                <span>扫码加群</span>
              </div>
              <div class="step">
                <div class="step-num">2</div>
                <span>联系群主</span>
              </div>
              <div class="step">
                <div class="step-num">3</div>
                <span>即时到账</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 购买提示 -->
        <div class="purchase-tip">
          💡 支持多种付款方式，激活码即时到账，享受专业技术支持
        </div>
      </div>

      <template #footer>
        <div class="modal-actions">
          <n-button @click="showPurchaseModal = false" class="cancel-btn">
            稍后购买
          </n-button>
          <n-button
            type="primary"
            class="tiktok-btn confirm-btn"
            @click="copyGroupNumber"
          >
            复制群号
          </n-button>
        </div>
      </template>
    </n-card>
    </n-modal>
  </div>

  <div v-else class="not-found">
    <div class="not-found-content">
      <div class="not-found-icon">🤖</div>
      <h2 class="not-found-title">产品未找到</h2>
      <p class="not-found-description">抱歉，您访问的产品不存在或已下架</p>
      <n-button type="primary" class="tiktok-btn" @click="$router.push('/products')">
        返回产品列表
      </n-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useMessage } from 'naive-ui'
import { useAppStore } from '@/stores'
// 移除了问题图标的导入

const route = useRoute()
const message = useMessage()
const appStore = useAppStore()

const purchaseLoading = ref<string | null>(null)

// 计算属性
const product = computed(() => {
  const id = route.params.id as string
  return appStore.getProductById(id)
})

// 根据产品获取套餐数据
const getCursorPlans = () => ({
  // Cursor 普通版套餐
  standard: [
    {
      type: "daily-standard",
      name: "天卡",
      description: "短期体验",
      price: 5.9,
      period: "天",
      icon: "flash",
      features: ["24小时有效期", "Claude Code 4.5模型", "智能代码补全", "AI对话编程"],
    },
    {
      type: "weekly-standard",
      name: "周卡",
      description: "一周体验",
      price: 16.9,
      period: "周",
      icon: "calendar",
      features: ["7天有效期", "Claude Code 4.5模型", "完整功能访问", "优先技术支持"],
    },
    {
      type: "monthly-standard",
      name: "月卡",
      description: "性价比之选",
      price: 39.9,
      period: "月",
      icon: "star",
      features: ["30天有效期", "Claude Code 4.5模型", "全功能解锁", "VIP客服支持"],
    },
    {
      type: "quarterly-standard",
      name: "季卡",
      description: "长期优惠",
      price: 99.9,
      period: "季",
      icon: "diamond",
      features: ["90天有效期", "Claude Code 4.5模型", "专业版功能", "专属客服经理"],
    },
  ],
  // Cursor 高级版（免魔法）套餐
  premium: [
    {
      type: "daily-premium",
      name: "天卡",
      description: "免魔法直连",
      price: 5.9,
      period: "天",
      icon: "rocket",
      features: [
        "24小时有效期",
        "Claude Code 4.5模型",
        "免魔法直连服务",
        "无需网络配置",
      ],
    },
    {
      type: "weekly-premium",
      name: "周卡",
      description: "企业级体验",
      price: 19.9,
      period: "周",
      icon: "shield",
      features: ["7天有效期", "Claude Code 4.5模型", "企业级网络", "稳定连接保障"],
    },
    {
      type: "monthly-premium",
      name: "月卡",
      description: "企业优选",
      price: 49.9,
      period: "月",
      icon: "crown",
      features: ["30天有效期", "Claude Code 4.5模型", "专线网络加速", "专属技术顾问"],
    },
    {
      type: "quarterly-premium",
      name: "季卡",
      description: "企业首选",
      price: 129,
      period: "季",
      icon: "business",
      features: ["90天有效期", "Claude Code 4.5模型", "企业专属通道", "团队协作功能"],
    },
  ]
})

const getClaudePlans = () => ({
  // Claude套餐
  standard: [
    {
      type: "daily-claude",
      name: "天卡",
      description: "基础体验",
      price: 16,
      period: "天",
      icon: "flash",
      features: ["1000次请求/天", "Sonnet模型", "基础AI对话", "24小时有效期"],
    },
    {
      type: "monthly-claude-15",
      name: "入门月卡",
      description: "15车套餐",
      price: 198,
      period: "月",
      icon: "calendar",
      features: ["Sonnet模型", "5小时375次请求", "30天有效期", "优先技术支持"],
    },
    {
      type: "monthly-claude-pro",
      name: "专业月卡",
      description: "高频使用",
      price: 398,
      period: "月",
      icon: "star",
      features: ["Sonnet模型", "5小时1250次请求", "30天有效期", "VIP客服支持"],
    },
    {
      type: "weekly-claude-opus",
      name: "Opus周卡",
      description: "顶级AI模型",
      price: 280,
      period: "周",
      icon: "crown",
      features: ["Opus模型", "7天无限制", "最强AI能力", "专属客服经理"],
    },
  ],
  premium: []
})

// 计算当前产品的套餐
const standardPlans = computed(() => {
  if (!product.value) return []

  const productName = product.value.name.toLowerCase()
  if (productName.includes('cursor')) {
    return getCursorPlans().standard
  } else if (productName.includes('claude')) {
    return getClaudePlans().standard
  } else {
    // 其他产品使用通用套餐（基于产品本身的价格）
    return [
      {
        type: "daily-standard",
        name: "天卡",
        description: "短期体验",
        price: product.value.pricing.daily,
        period: "天",
        icon: "flash",
        features: ["24小时有效期", "完整功能访问", "基础客服支持"],
      },
      {
        type: "weekly-standard",
        name: "周卡",
        description: "一周体验",
        price: product.value.pricing.weekly,
        period: "周",
        icon: "calendar",
        features: ["7天有效期", "全功能访问", "优先技术支持"],
      },
      {
        type: "monthly-standard",
        name: "月卡",
        description: "性价比之选",
        price: product.value.pricing.monthly,
        period: "月",
        icon: "star",
        features: ["30天有效期", "专业版功能", "VIP客服支持"],
      },
      {
        type: "quarterly-standard",
        name: "季卡",
        description: "长期优惠",
        price: product.value.pricing.quarterly,
        period: "季",
        icon: "diamond",
        features: ["90天有效期", "企业级功能", "专属客服经理"],
      },
    ]
  }
})

const premiumPlans = computed(() => {
  if (!product.value) return []

  const productName = product.value.name.toLowerCase()
  if (productName.includes('cursor')) {
    return getCursorPlans().premium
  } else if (productName.includes('claude')) {
    return getClaudePlans().premium
  } else {
    // 其他产品不显示高级版套餐
    return []
  }
})

const tutorialSteps = [
  {
    title: '注册账户',
    description: '在AI梦工厂创建您的专属账户，享受个性化服务体验。'
  },
  {
    title: '选择套餐',
    description: '根据您的使用需求，选择最适合的价格套餐方案。'
  },
  {
    title: '完成支付',
    description: '使用安全的支付方式完成订单，支持多种支付渠道。'
  },
  {
    title: '获取激活码',
    description: '支付成功后，系统将自动生成激活码并发送到您的邮箱。'
  },
  {
    title: '激活软件',
    description: '使用激活码在对应软件中完成激活，开始您的AI编程之旅。'
  }
]

// 方法
const getFeatureDescription = (feature: string) => {
  const descriptions: Record<string, string> = {
    'Claude Code 4.5模型': '采用最新Claude Code 4.5模型，提供更智能的AI编程体验',
    '智能代码补全': '基于AI的智能代码补全，提升编程效率数倍',
    'AI对话编程': '通过自然语言与AI对话，轻松生成高质量代码',
    '多语言支持': '支持Python、JavaScript、Java等多种主流编程语言',
    '实时协作': '团队成员可以实时协作编程，提升团队效率',
    '代码审查': '智能代码审查，发现潜在问题和优化建议',
    '性能优化': '自动分析代码性能，提供优化建议和方案',
    '安全检测': '检测代码安全漏洞，保障应用程序安全',
    '重构建议': '智能重构建议，让代码更加清晰和可维护',
    '自然语言编程': '使用自然语言描述需求，AI自动生成代码',
    '智能调试': 'AI辅助调试，快速定位和解决代码问题',
    '代码解释': '详细解释代码逻辑，帮助理解复杂代码结构',
    '项目分析': '全面分析项目结构，提供改进建议'
  }

  return descriptions[feature] || '强大的AI功能，提升您的开发体验'
}

// 购买弹窗相关
const showPurchaseModal = ref(false)
const selectedPlan = ref<any>(null)

const handleSelectPlan = (plan: any) => {
  // 直接跳转到购买页面
  window.open('https://pay.ldxp.cn/shop/rpmn', '_blank')
}

const copyGroupNumber = async () => {
  try {
    await navigator.clipboard.writeText("1013099557")
    message.success("群号已复制到剪贴板")
  } catch (error) {
    message.error("复制失败，群号：1013099557")
  }
}

// 根据产品获取定价相关文本
const getPricingBadgeLabel = () => {
  if (!product.value) return 'PRICING'

  const productName = product.value.name.toLowerCase()
  if (productName.includes('cursor')) {
    return 'CURSOR PRICING'
  } else if (productName.includes('claude')) {
    return 'CLAUDE PRICING'
  } else {
    return 'PRICING PLANS'
  }
}

const getPricingTitle = () => {
  if (!product.value) return '套餐选择'

  const productName = product.value.name.toLowerCase()
  if (productName.includes('cursor')) {
    return 'Cursor套餐选择'
  } else if (productName.includes('claude')) {
    return 'Claude套餐选择'
  } else {
    return `${product.value.name}套餐选择`
  }
}

const getPricingSubtitle = () => {
  if (!product.value) return '多种套餐满足不同需求'

  const productName = product.value.name.toLowerCase()
  if (productName.includes('cursor')) {
    return '支持Claude Code 4.5模型，多种套餐满足不同开发需求'
  } else if (productName.includes('claude')) {
    return '智能AI助手，多种套餐提供不同层次的AI服务'
  } else {
    return `专业${product.value.category}工具，多种套餐满足不同使用需求`
  }
}

const getPlanCategoryTitle = () => {
  if (!product.value) return '🎯 套餐选择'

  const productName = product.value.name.toLowerCase()
  if (productName.includes('cursor')) {
    return '🎯 普通版'
  } else if (productName.includes('claude')) {
    return '🤖 套餐选择'
  } else {
    return '🎯 套餐选择'
  }
}

const getStandardPlanDesc = () => {
  if (!product.value) return '基础功能完整'

  const productName = product.value.name.toLowerCase()
  if (productName.includes('cursor')) {
    return '适合个人开发者，基础功能完整'
  } else if (productName.includes('claude')) {
    return '多种规格满足不同使用需求'
  } else {
    return '适合个人用户，基础功能完整'
  }
}



onMounted(() => {
  if (!product.value) {
    message.error('产品不存在')
  }
})
</script>

<style scoped>
.product-detail-page {
  min-height: 100vh;
  padding-top: 40px;
}

.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Product Hero */
.product-hero {
  margin-bottom: 80px;
}

.product-main-info {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 40px;
  background: linear-gradient(135deg, rgba(22, 24, 35, 0.9) 0%, rgba(47, 47, 47, 0.7) 100%);
  border-radius: 20px;
  border: 1px solid rgba(254, 44, 85, 0.2);
}

.product-icon-large {
  font-size: 4rem;
  filter: drop-shadow(0 0 20px rgba(254, 44, 85, 0.6));
}

.product-details {
  flex: 1;
}

.product-title {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.1;
}

.product-subtitle {
  font-size: 1.5rem;
  color: #cccccc;
  margin-bottom: 24px;
  line-height: 1.4;
}

.product-meta {
  display: flex;
  gap: 12px;
  align-items: center;
}

.category-tag {
  background: rgba(37, 244, 238, 0.2) !important;
  border: 1px solid rgba(37, 244, 238, 0.3) !important;
  color: #25F4EE !important;
}

.popular-tag {
  background: linear-gradient(135deg, #FE2C55, #8B5CF6) !important;
  border: none !important;
  color: white !important;
}

/* Section Styles */
.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 40px;
  text-align: center;
}

/* Features Section */
.features-section {
  margin-bottom: 80px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.feature-card {
  text-align: center;
  padding: 32px 24px;
}

.product-feature-icon {
  font-size: 3rem;
  margin-bottom: 20px;
  display: block;
}

.feature-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #ffffff;
}

.feature-description {
  color: #cccccc;
  line-height: 1.6;
}

/* Section Header */
.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.header-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(254, 44, 85, 0.1);
  border: 1px solid rgba(254, 44, 85, 0.3);
  border-radius: 20px;
  margin-bottom: 24px;
  backdrop-filter: blur(10px);
}

.badge-icon {
  font-size: 1rem;
}

.badge-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #fe2c55;
  letter-spacing: 1px;
}

.section-subtitle {
  font-size: 1.2rem;
  color: #999999;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Pricing Section */
.pricing-section {
  margin-bottom: 80px;
}

/* Plan Category */
.plan-category {
  margin-bottom: 60px;
}

.plan-category:last-child {
  margin-bottom: 0;
}

.category-header {
  text-align: center;
  margin-bottom: 40px;
}

.category-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.category-desc {
  color: #999999;
  font-size: 1rem;
  margin: 0;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.pricing-card {
  position: relative;
  text-align: center;
}

.premium-card {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.05) 0%,
    rgba(255, 140, 0, 0.05) 100%
  ) !important;
  border: 1px solid rgba(255, 215, 0, 0.3) !important;
}

.plan-header {
  margin-bottom: 24px;
  position: relative;
}

.plan-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  background: rgba(254, 44, 85, 0.1);
  border: 2px solid rgba(254, 44, 85, 0.2);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.plan-icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(254, 44, 85, 0.05) 0%,
    rgba(139, 92, 246, 0.05) 100%
  );
  border-radius: 14px;
}

.plan-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #ffffff;
}

.plan-description {
  color: #cccccc;
  font-size: 0.9rem;
}

.popular-badge {
  position: absolute;
  top: -12px;
  right: -12px;
  background: linear-gradient(135deg, #FE2C55, #8B5CF6) !important;
  border: none !important;
  color: white !important;
  transform: rotate(12deg);
}

.plan-pricing {
  margin-bottom: 32px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

.plan-price {
  font-size: 3rem;
  font-weight: 800;
}

.plan-period {
  color: #999999;
  font-size: 1.1rem;
}

.plan-features {
  margin-bottom: 32px;
  text-align: left;
}

.plan-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: #cccccc;
}

.feature-icon {
  color: #25f4ee;
  flex-shrink: 0;
}

.plan-btn {
  color: #cccccc !important;
  border: 2px solid #333333 !important;
}

.plan-btn:hover {
  border-color: #FE2C55 !important;
  color: #ffffff !important;
}

/* Tutorial Section */
.tutorial-section {
  margin-bottom: 80px;
}

.tutorial-steps {
  max-width: 800px;
  margin: 0 auto;
}

.tutorial-step {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;
  padding: 24px;
  background: rgba(22, 24, 35, 0.8);
  border-radius: 16px;
  border: 1px solid rgba(254, 44, 85, 0.1);
}

.step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FE2C55, #8B5CF6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
}

.step-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #ffffff;
}

.step-description {
  color: #cccccc;
  line-height: 1.6;
}

/* Not Found */
.not-found {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.not-found-content {
  text-align: center;
}

.not-found-icon {
  font-size: 6rem;
  margin-bottom: 24px;
}

.not-found-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: #ffffff;
}

.not-found-description {
  font-size: 1.1rem;
  color: #cccccc;
  margin-bottom: 32px;
}

.premium-btn {
  background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
  border: none !important;
  color: #000000 !important;
  font-weight: 700 !important;
}

.premium-btn:hover {
  background: linear-gradient(135deg, #ff8c00, #ffd700) !important;
  transform: translateY(-2px);
}

/* 精简购买弹窗样式 */
.purchase-modal {
  z-index: 9999;
}

.purchase-card {
  background: rgba(22, 24, 35, 0.95) !important;
  border: 1px solid rgba(254, 44, 85, 0.2) !important;
  backdrop-filter: blur(20px);
}

.purchase-content {
  padding: 0;
}

/* 套餐信息区域 */
.selected-plan {
  background: rgba(254, 44, 85, 0.05);
  border: 1px solid rgba(254, 44, 85, 0.2);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.plan-info {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.plan-icon-small {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(254, 44, 85, 0.1);
  border: 2px solid rgba(254, 44, 85, 0.3);
  border-radius: 10px;
  flex-shrink: 0;
}

.plan-details h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.plan-price .price {
  font-size: 1.3rem;
  font-weight: 800;
  background: linear-gradient(135deg, #fe2c55, #8b5cf6);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.plan-price .period {
  font-size: 0.8rem;
  color: #999999;
}

.plan-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 4px 8px;
  background: rgba(254, 44, 85, 0.2);
  border: 1px solid rgba(254, 44, 85, 0.4);
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fe2c55;
}

/* QQ群区域 */
.qr-section {
  margin-bottom: 20px;
}

.qr-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.qr-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
}

.group-number {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fe2c55;
  padding: 2px 8px;
  background: rgba(254, 44, 85, 0.1);
  border-radius: 8px;
}

.qr-content {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: center;
  padding: 12px 0;
}

.qr-code {
  flex-shrink: 0;
  padding: 6px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.qr-image {
  width: 160px;
  height: 160px;
  border-radius: 8px;
  display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(254, 44, 85, 0.2);
}

.qr-steps {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #cccccc;
}

.step-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fe2c55, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #ffffff;
  font-size: 0.7rem;
  flex-shrink: 0;
}

/* 购买提示 */
.purchase-tip {
  font-size: 0.8rem;
  color: #999999;
  text-align: center;
  padding: 12px;
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 8px;
  margin-bottom: 16px;
  line-height: 1.4;
}

/* 底部按钮 */
.modal-actions {
  display: flex;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cancel-btn {
  flex: 1;
  color: #cccccc !important;
  border: 2px solid #333333 !important;
}

.cancel-btn:hover {
  border-color: #fe2c55 !important;
  color: #ffffff !important;
}

.confirm-btn {
  flex: 1;
  font-weight: 600 !important;
}

/* 专业图标样式 */
.icon-wrapper {
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 2;
}

.plan-icon-large .icon-wrapper {
  width: 48px;
  height: 48px;
}

/* 闪电图标 */
.icon-flash::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 32px;
  background: linear-gradient(135deg, #fe2c55, #ff6b35);
  clip-path: polygon(60% 0%, 100% 35%, 80% 35%, 75% 100%, 35% 65%, 60% 65%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 日历图标 */
.icon-calendar::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 20px;
  background: linear-gradient(135deg, #fe2c55, #8b5cf6);
  border-radius: 4px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icon-calendar::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 2px;
  background: rgba(255, 255, 255, 0.9);
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 0 rgba(255, 255, 255, 0.9);
}

/* 星星图标 */
.icon-star::before {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #fe2c55, #ffd700);
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 钻石图标 */
.icon-diamond::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  clip-path: polygon(50% 0%, 80% 20%, 100% 60%, 50% 100%, 0% 60%, 20% 20%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 火箭图标 */
.icon-rocket::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 32px;
  background: linear-gradient(135deg, #ff6b35, #fe2c55);
  clip-path: polygon(
    50% 0%,
    80% 70%,
    60% 70%,
    60% 100%,
    40% 100%,
    40% 70%,
    20% 70%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 盾牌图标 */
.icon-shield::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 28px;
  background: linear-gradient(135deg, #10b981, #3b82f6);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 皇冠图标 */
.icon-crown::before {
  content: "";
  position: absolute;
  width: 28px;
  height: 20px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  clip-path: polygon(
    20% 100%,
    0% 40%,
    20% 60%,
    50% 20%,
    80% 60%,
    100% 40%,
    80% 100%
  );
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icon-crown::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 4px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  border-radius: 2px;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}

/* 商务图标 */
.icon-business::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 24px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border-radius: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icon-business::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 0 -6px rgba(255, 255, 255, 0.9);
}

/* 高级版图标效果 */
.premium-card .icon-wrapper::before {
  background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
}

.premium-card .icon-crown::before,
.premium-card .icon-crown::after {
  background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
}

.premium-card .icon-rocket::before {
  background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
}

.premium-card .icon-shield::before {
  background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
}

.premium-card .icon-business::before {
  background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
}

/* 图标悬浮效果 */
.icon-wrapper {
  transition: all 0.3s ease;
}

.pricing-card:hover .icon-wrapper {
  transform: scale(1.1) rotate(5deg);
}

.premium-card:hover .icon-wrapper {
  transform: scale(1.1) rotate(-5deg);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 1024px) {
  .product-main-info {
    flex-direction: column;
    text-align: center;
  }

  .product-title {
    font-size: 3rem;
  }
}

@media (max-width: 768px) {
  .product-title {
    font-size: 2.5rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .category-title {
    font-size: 1.5rem;
    flex-direction: column;
    gap: 8px;
  }

  .tutorial-step {
    flex-direction: column;
    text-align: center;
  }
}

/* 移动端适配 */
@media (max-width: 600px) {
  .purchase-card {
    width: 90vw !important;
    max-width: 400px;
  }

  .qr-image {
    width: 140px;
    height: 140px;
  }

  .qr-content {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .qr-steps {
    flex-direction: row;
    justify-content: center;
    gap: 12px;
  }

  .step {
    flex-direction: column;
    gap: 4px;
  }
}
</style>
